<template>
	<view style="height: 100vh;">
		<view class="input">
			<input type="text" value="" focus="true" v-model="searchName" placeholder="请输入要搜索的物品"/>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="refresh()" style="height: 100%; margin-top: 88rpx; padding-bottom: 30rpx;">
			<goods-list :goodsList="homeGoodsList"></goods-list>
		</scroll-view>
	</view>
	
	
</template>

<script>
	import {getGoodsSearch} from '../../api/index/index.js'
	import goodsList from '@/components/goods-list/goods-list.vue'
	export default {
		data() {
			components:{goodsList}
			return {
				searchName:'',
				homeGoodsList:[],
				page: 1,
				flag:true
			}
		},
		methods: {
			async getGoodsSearch(name){
				// if(name !==''){
				// let name = 'name'
				getGoodsSearch(name,this.page).then((res)=>{
					console.log(res)
					this.homeGoodsList = this.homeGoodsList.concat(res.data)
					this.page++
				},(err)=>{
					this.flag=false
					console.log(this.flag)
				})
				
				// console.log(this.$throw())
				
			},
			refresh(){
				if(!this.flag){return}
				this.getGoodsSearch(this.searchName)
			}
		},
		onLoad() {
			this.getGoodsSearch(this.searchName)
		},
		watch:{
			searchName(){
				this.flag = true
				this.getGoodsSearch(this.searchName)
				this.page=1
				this.homeGoodsList=[]
			}
		}
	}
</script>

<style lang="stylus" scoped>
.input
	width 100%
	padding 0 40rpx
	position fixed
	top 0
	z-index 9999
	background-color #fff
	input
		width 100%
		border 1rpx solid #DD524D
		border-radius 30rpx
		height 88rpx
		padding 0 20rpx
</style>
